<template>
  <el-dialog
    title="添加角色"
    :visible.sync="dialogVisible"
    width="60%">
    <div class="table-page-search-wrapper">
      <el-form inline :model="queryParams" @submit.native.prevent>
        <el-row :gutter="48">
          <!-- 搜索item项 -->
          <el-col :md="8" :sm="24">
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model.trim="queryParams.roleName"
                placeholder="请输入角色名称"
                clearable
                @keyup.enter.native="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="24">
            <el-form-item label="角色key" prop="roleKey">
              <el-input
                v-model.trim="queryParams.roleKey"
                placeholder="请输入角色key"
                clearable
                @keyup.enter.native="handleSearch"
              />
            </el-form-item>
          </el-col>

          <!-- 查询按钮 -->
          <el-col :md="8" :sm="24">
            <el-form-item>
              <span
                class="table-page-search-submitButtons"
              >
                <el-button type="primary" @click="handleSearch">查 询</el-button>
                <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-block">
      <!-- 表格数据列表 -->
      <el-table
        :data="tableList"
        ref="roleListRef"
        :height="tableMaxHeigth"
        stripe
        row-key="id"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" reserve-selection />
        <el-table-column prop="roleName" label="角色名称" align="center" show-overflow-tooltip/>
        <el-table-column prop="roleKey" label="角色key" align="center" >
        </el-table-column>
        <el-table-column prop="roleKey" label="角色类型" align="center" >
          <template slot-scope="scope">
            {{ scope.row.roleType == 1 ? '系统管理员' : '自定义' }}
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" align="center" >
          <template slot-scope="scope">
            {{ scope.row.createdAt | formatDate }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableList"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitBtn" >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getList } from '@/api/roleManage'
import { addOrgRole } from '@/api/authorityManage'
export default {
  name: 'AddUser',
  prop: {
    orgId: {
      type: Number,
      require: true,
      default: () => 0
    }
  },
  data () {
    return {
      tableList: [],
      dialogVisible: false,
      // 查询参数
      queryParams: {
        roleName: '',
        roleKey: '',
        pageNo: 1,
        pageSize: 10
      },
      orgId: '',
      tableMaxHeigth: 0,
      total: 0,
      tableSelectionList: []
    }
  },
  mounted () {
     // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
   async submitBtn () {
      if (this.tableSelectionList.length <= 0) {
        return this.$message.error('角色不能为空')
      }
      const roleIds = this.tableSelectionList.map(v => v.id)
      await addOrgRole({ orgId: this.orgId, roleIds })
      this.$emit('getTableList')
      this.dialogVisible = false
      this.$message.success('操作成功')
    },
    handleSelectionChange (val) {
      this.tableSelectionList = val
    },
    open (orgId) {
      this.dialogVisible = true
      this.queryParams.roleName = ''
      this.queryParams.roleKey = ''
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.total = 0
      this.orgId = orgId
      this.getTableList()
      this.$nextTick(() => {
        this.$refs.roleListRef.clearSelection()
      })
    },
    beforeDestroy () {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 600
      })
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    // 重置
    resetQuery () {
      this.queryParams.roleName = ''
      this.queryParams.roleKey = ''
      this.queryParams.pageNo = 1
      this.getTableList()
    }
  }
}
</script>
<style scoped lang="scss">
</style>
